<template>
  <div>
    <van-cell is-link @click="sectionPopupShow=true">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span v-for="(item,index) in isSaleArr" :key="index" class="custom-title"><van-icon name="certificate"/>{{ item.name }}</span>
      </template>
    </van-cell>
    <van-popup
        v-model:show="sectionPopupShow"
        round
        closeable
        position="bottom"
        :style="{ height: '45%'}"
    >

      <div style="margin: 20px">
        <p style="text-align: center">服务说明</p>


        <div class="section" v-for="(item,index) in sectionArr">
          <p class="section-title">
            <van-icon name="checked" color="#ff6700"/>
            <span style="margin-left: 10px">{{ item.name }}</span>
          </p>
          <div class="section-info">{{ item.detail }}</div>
        </div>

      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "AfterService",
  props: {
    templateId: ''
  },
  data() {
    return {
      sectionArr: [],
      isSaleArr: [],
      sectionPopupShow: false,
    }
  },
  created() {
    /*this.axios.get('/afterSale/template?templateId=' + this.templateId).then((response) => {
      this.sectionArr = response.data;
      for (let i = 0; i < this.sectionArr.length; i++) {
        if (this.sectionArr[i].isSale == 1) {
          this.isSaleArr.push(this.sectionArr[i]);
        }
      }
    })*/
  }
}
</script>

<style scoped>
.custom-title {
  color: #666666;
  font-size: 12px;
  margin-right: 10px;
}

.section {
  margin-top: 10px;
}

.section-title {
  font-size: 14px;
  line-height: 18px;
  margin: 0;
}

.section-info {
  font-size: 12px;
  line-height: 18px;
  margin-left: 24px;
  color: #999999;
}
</style>